﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	<link rel="icon" href="/assets/img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
	<link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
		.goods-intro-list li {
			display: inline-block;
			width: 300px;
		}
		.Ptable {
			margin: 10px 0;
		}
		.Ptable-item {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			border-bottom: 1px solid #eee;
		}
		.Ptable-item h3 {
			width: 110px;
			text-align: right;
		}
		.Ptable-item h3, .package-list h3 {
			font-weight: 400;
			font-size: 12px;
			float: left;
		}
		h3 {
			display: block;
			font-size: 1.17em;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			font-weight: bold;
		}
		.Ptable-item dl {
			margin-left: 110px;
		}
		dl {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}
		.Ptable-item dt {
			width: 160px;
			float: left;
			text-align: right;
			padding-right: 5px;
		}
		.Ptable-item dd {
			margin-left: 210px;
		}
		dd {
			display: block;
			-webkit-margin-start: 40px;
		}
		.package-list {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			margin-top: -1px;
		}
		.package-list h3 {
			width: 130px;
			text-align: right;
		}
		.package-list p {
			margin-left: 155px;
			padding-right: 50px;
		}
	</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top/>
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">手机通讯</a>
					</li>
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">华为（HUAWEI）</a>
					</li>
					<li class="active">华为（HUAWEI） 华为P10 Plus 手机 </li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="img in images">
										<img :src="img" :bimg="img" onmousemove="preview(this)"/>
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4 v-text="sku.title"></h4>
					</div>
					<div class="news"><span>64G版本仅需2766元，256G 黑、金、玉色现货速发！<a href="https://item.jd.com/26652299286.html" target="_blank">P20 Pro点这</a></span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em v-text="ly.formatPrice(sku.price)"></em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
									购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span v-text="sku.stock > 0 ? '有货' : '缺货'"></span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(options,id) in specialSpec" :key="id">
								<dt>
									<div class="fl title">
										<i v-text="params[id]"></i>
									</div>
								</dt>
								<dd v-for="(o,i) in options" :key="i" @click="selectSku(id,i)">
									<a href="javascript:;" :class="{selected:i === indexes[id], locked:locked(id, i)}">
										{{o}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled v-model="num" minnum="1"
											   class="itxt"/>
										<a href="javascript:void(0)" class="increment plus" @click="increment">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="decrement">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="#" @click.prevent="addCart" target="_blank"
										   class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png"/>
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="e">
											<img src="/img/_/dp01.png"/>
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>39</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>50</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>59</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>99</span>
										</label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail">
									<div><style>/*C-B*/

.ssd-module-wrap {width: 750px; margin: 0 auto; position: relative; text-align: left; background-color: #ffffff; }
.ssd-module-wrap .ssd-module,.ssd-module-wrap .ssd-module-heading{ width: 750px; position:relative; overflow: hidden;  }
.ssd-module{background-repeat:no-repeat; background-position:left center; background-size:100% 100%;}
.ssd-module .ssd-widget-pic,.ssd-module .ssd-widget-text,.ssd-module .ssd-widget-line,.ssd-module-wrap .ssd-widget-rectangle,.ssd-module-wrap .ssd-widget-circle,.ssd-module-wrap .ssd-widget-triangle,.ssd-module-wrap .ssd-widget-table{ position: absolute; overflow: hidden; }
.ssd-module-wrap .ssd-widget-table th,.ssd-module-wrap .ssd-widget-table td{position:relative;}
.ssd-module .ssd-widget-pic img{display: block; width:100%; height:100% }
.ssd-module .ssd-widget-text{ position: absolute; overflow: hidden;}
.ssd-module .ssd-widget-text span{display:block;overflow:hidden; width:100%;  height:100%; padding:0; margin: 0; word-break:break-all; word-wrap:break-word; white-space:normal;}
.ssd-module .ssd-widget-link{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent;z-index:100 }
.ssd-module-wrap .ssd-widget-text{ line-height: 1.5; }
.ssd-module-wrap .ssd-cell-text{position:absolute;top:0;left:0;right:0;width: 100%;height: 100%;overflow: auto;}
.ssd-module-heading{background-repeat:no-repeat; background-position:left center; background-size:100% 100%; }
.ssd-module-heading .ssd-module-heading-layout{display:inline-block;}
.ssd-module-heading .ssd-widget-heading-ch{float: left;display: inline-block;margin-left: 15px; margin-right:6px; height: 100%;}
.ssd-module-heading .ssd-widget-heading-en{float: left;display: inline-block;margin-left: 6px; margin-right:15px; height: 100%;}
.ssd-module-wrap .ssd-widget-rectangle{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
/*C-E*/.ssd-module-wrap .M14989663249721{height:79px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t5728/55/4877720561/69104/1f13f880/59574e38Nadefb07e.jpg)}
.ssd-module-wrap .M15036419547361{height:992px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/imgzone/jfs/t9133/118/53631227/669000/c4b31050/599fbf9fN30e9135e.jpg)}
.ssd-module-wrap .M14994085534521{height:321px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t5737/107/5374803380/241718/be165873/595f2223N39553ec2.jpg)}
.ssd-module-wrap .M14972469293961{height:1154px; width:750px; background-color:#f2f2f2; background-image:url(https://img30.360buyimg.com/sku/jfs/t6616/309/519357455/331258/c8c10183/59411324N94c274c0.jpg)}
.ssd-module-wrap .M14935307605472{height:658px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t6559/305/551574849/320853/876fee5/59411324Ne78d5882.jpg)}
.ssd-module-wrap .M14935307739513{height:165px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/sku/jfs/t6448/343/522551567/57358/540b705a/59411324Nfbce29be.jpg)}
.ssd-module-wrap .M14935307881434{height:497px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t6337/222/537968894/265365/eb88d6f9/59411324Ne9100405.jpg)}
.ssd-module-wrap .M14935308003635{height:508px; width:750px; background-color:#d7d7d7; background-image:url(https://img30.360buyimg.com/sku/jfs/t6418/302/543293885/389758/c5a07495/59411325N9e7251aa.jpg)}
.ssd-module-wrap .M14955909309291{height:500px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/sku/jfs/t6193/338/558634948/385721/d84e8b6f/59411325N913d43e1.jpg)}
.ssd-module-wrap .M14960450718291{height:499px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t6448/350/537075016/243072/421d0a40/59411324N08efc612.jpg)}
.ssd-module-wrap .M14960450861812{height:524px; width:750px; background-color:#e9e9e9; background-image:url(https://img30.360buyimg.com/sku/jfs/t6409/264/593935813/282179/61b7e371/59411325Nc1aef47f.jpg)}
.ssd-module-wrap .M14974370277601{height:499px; width:750px; background-color:#d7d7d7; background-image:url(https://img30.360buyimg.com/sku/jfs/t6067/285/2425331009/345468/5d2ae9fc/5941137fN1bfde268.jpg)}
.ssd-module-wrap .M14974370504862{height:500px; width:750px; background-color:#b3b3b3; background-image:url(https://img30.360buyimg.com/sku/jfs/t6172/68/551333703/379975/6b6e2165/59411381Ned53d6cf.jpg)}
.ssd-module-wrap .M14974370604663{height:500px; width:750px; background-color:#e9e9e9; background-image:url(https://img30.360buyimg.com/sku/jfs/t5668/266/3660010249/394860/a9c39a2b/59411382N63712b8a.jpg)}
.ssd-module-wrap .M14974370709414{height:500px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/sku/jfs/t6256/166/536406976/294224/8c5d1566/59411382Nc69c33a5.jpg)}
.ssd-module-wrap .M14974370801315{height:500px; width:750px; background-color:#d7d7d7; background-image:url(https://img30.360buyimg.com/sku/jfs/t5710/323/3741219709/256330/ba7113cb/59411381N04d6aa5c.jpg)}
.ssd-module-wrap .M14974370886686{height:500px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/sku/jfs/t6043/194/2144398667/277202/d648bec2/59411382Ne988ef20.jpg)}
.ssd-module-wrap .M14974370977237{height:500px; width:750px; background-color:#f2f2f2; background-image:url(https://img30.360buyimg.com/sku/jfs/t6586/160/546571127/397448/dae3201d/59411382Na6e81e2a.jpg)}
.ssd-module-wrap .M14989663437952{height:185px; width:750px; background-color:#d7d7d7; background-image:url(https://img30.360buyimg.com/sku/jfs/t5935/79/3790504007/127881/f68be3a3/59573cf6Nacd1773e.jpg)}
.ssd-module-wrap .M14972488124465{height:450px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/sku/jfs/t6388/70/94495240/339020/eb385720/59392635N2d8555a5.jpg)}
.ssd-module-wrap .M14974371098918{height:292px; width:750px; background-color:#e9e9e9; background-image:url(https://img30.360buyimg.com/sku/jfs/t6199/100/561002798/127386/7bb8c1e/594113ccNd0463dff.jpg)}
.ssd-module-wrap .M14935309760672{height:575px; width:750px; background-color:#d7d7d7; background-image:url(https://img30.360buyimg.com/imgzone/jfs/t4855/73/954592765/257757/13a2aab4/58eb3544N6755d4a5.jpg)}
.ssd-module-wrap .M14935310087393{height:677px; width:750px; background-color:#cbcbcb; background-image:url(https://img30.360buyimg.com/imgzone/jfs/t4906/209/934432517/288022/28972a4b/58eb3545N7417055f.jpg)}
</style><br/><div align="center"><img alt="" src="//img10.360buyimg.com/imgzone/jfs/t8671/222/1467175489/71564/f39ed996/59ba12f2Nd0a1fcd2.jpg" /><br /><img alt="" src="//img30.360buyimg.com/sku/jfs/t8296/346/63435530/301664/569618e2/599fc209N9e15ed71.jpg" /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t11113/108/2092000558/553384/923f9d34/5a13fd31Nc20513fd.jpg" /><br /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t12487/352/1613761144/385845/4948abf9/5a251ed2Nccef8208.jpg" /><br /><img alt="" src="//img30.360buyimg.com/sku/jfs/t7978/358/1724592445/47677/ec69d21d/599fc208Nadf60b43.jpg" /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t13936/230/647391278/126143/a91326fb/5a10fc00N5dacd989.jpg" /><br /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t8197/250/1434527911/451912/ed5b2190/59ba2036N4394d1c4.jpg" /><br /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t8404/273/1456098444/529379/52be66b6/59ba2036N590ede4c.jpg" /><br /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t9457/55/1332786920/1062090/1b067392/59ba202bN8c650396.jpg" /><br /><img alt="" src="//img30.360buyimg.com/popWaterMark/jfs/t8431/238/1475657654/959391/f5b6a75f/59ba2032N4d441a9c.jpg" /><br /><br /><img alt="" src="//img10.360buyimg.com/imgzone/jfs/t8839/246/975359774/286380/acd0cb2c/59ba2295Nad6a849a.jpg" /><br /><br /><img alt="" src="//img10.360buyimg.com/imgzone/jfs/t9280/263/991038113/240493/5cc1a0d2/59ba1663N99313921.jpg" /><br /><img alt="" src="//img10.360buyimg.com/imgzone/jfs/t8881/270/1452713119/654115/f4203680/59ba1667N6883b619.jpg" /><br /><br /></div><br/><script></script><br/></div>
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
									<div class="Ptable-item" v-for="group in specGroups" :key="group.id">
										<h3 v-text="group.name"></h3>
										<dl>
            <span v-for="param in group.params" :key="param.id">
				<dt v-text="param.name"></dt><dd v-text="param.value + (param.unit || '')"></dd>
			</span>
										</dl>
									</div>
								</div>
								<div class="package-list">
									<h3>包装清单</h3>
									<p>请输入...</p>
								</div>

							</div>
							<div id="three" class="tab-pane">
								<p>本产品全国联保，享受三包服务，质保期为：一年质保</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>3699.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png"/>
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4388.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script>
	const specialSpec = JSON.parse("{\"4\":[\"\u66DC\u77F3\u9ED1\",\"\u4EAE\u9ED1\",\"\u94BB\u96D5\u84DD\",\"\u94BB\u96D5\u91D1\",\"\u9676\u74F7\u767D\",\"\u8349\u6728\u7EFF\",\"\u5170\u7389\u9650\u91CF\u5B9A\u5236\u7248\",\"\u73AB\u7470\u91D1\"],\"12\":[\"6GB\"],\"13\":[\"64GB\"]}");
	const genericSpec = JSON.parse("{\"1\":\"\u5176\u5B83\",\"2\":\"VKY-AL00\",\"3\":2017.0,\"5\":165,\"6\":\"\u5176\u5B83\",\"7\":\"Android\",\"8\":\"\u6D77\u601D\uFF08Hisilicon\uFF09\",\"9\":\"\u5176\u4ED6\",\"10\":\"\u516B\u6838\",\"11\":2.4,\"14\":5.5,\"15\":\"\u5176\u4ED6\",\"16\":800.0,\"17\":1200.0,\"18\":3750.0}");
	const skus = [{"id":13164693175,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u9676\u74F7\u767D \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/8\/1\/1524297497591.jpg","price":378800,"ownSpec":"{\"4\":\"\u9676\u74F7\u767D\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"4_0_0","enable":true,"createTime":"2018-04-21T15:58:18.000+08:00","lastUpdateTime":"2018-04-21T15:58:18.000+08:00","stock":9999},{"id":13164693176,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u66DC\u77F3\u9ED1 \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/1\/2\/1524297495532.jpg","price":378800,"ownSpec":"{\"4\":\"\u66DC\u77F3\u9ED1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"0_0_0","enable":true,"createTime":"2018-04-21T15:58:16.000+08:00","lastUpdateTime":"2018-04-21T15:58:16.000+08:00","stock":9999},{"id":13164693177,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u8349\u6728\u7EFF \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/10\/9\/1524297498088.jpg","price":378800,"ownSpec":"{\"4\":\"\u8349\u6728\u7EFF\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"5_0_0","enable":true,"createTime":"2018-04-21T15:58:18.000+08:00","lastUpdateTime":"2018-04-21T15:58:18.000+08:00","stock":9999},{"id":13164693182,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u94BB\u96D5\u91D1 \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/8\/2\/1524297496947.jpg","price":378800,"ownSpec":"{\"4\":\"\u94BB\u96D5\u91D1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"3_0_0","enable":true,"createTime":"2018-04-21T15:58:17.000+08:00","lastUpdateTime":"2018-04-21T15:58:17.000+08:00","stock":9999},{"id":13164693185,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u94BB\u96D5\u84DD \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/3\/2\/1524297496502.jpg","price":378800,"ownSpec":"{\"4\":\"\u94BB\u96D5\u84DD\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"2_0_0","enable":true,"createTime":"2018-04-21T15:58:17.000+08:00","lastUpdateTime":"2018-04-21T15:58:17.000+08:00","stock":9999},{"id":13164693190,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u73AB\u7470\u91D1 \u5168\u7F51\u901A(6G+64G)","images":"http:\/\/image.leyou.com\/images\/14\/7\/1524297499049.jpg","price":276600,"ownSpec":"{\"4\":\"\u73AB\u7470\u91D1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"7_0_0","enable":true,"createTime":"2018-04-21T15:58:19.000+08:00","lastUpdateTime":"2018-04-21T15:58:19.000+08:00","stock":9999},{"id":17347463834,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u4EAE\u9ED1 \u5168\u7F51\u901A(6G+128G)","images":"http:\/\/image.leyou.com\/images\/11\/7\/1524297496098.jpg","price":378800,"ownSpec":"{\"4\":\"\u4EAE\u9ED1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"1_0_0","enable":true,"createTime":"2018-04-21T15:58:16.000+08:00","lastUpdateTime":"2018-04-21T15:58:16.000+08:00","stock":9999},{"id":25573151670,"spuId":93,"title":"\u534E\u4E3A\uFF08HUAWEI\uFF09 \u534E\u4E3AP10 Plus \u624B\u673A \u5170\u7389\u9650\u91CF\u5B9A\u5236\u7248 \u5168\u7F51\u901A(6G+256G)","images":"http:\/\/image.leyou.com\/images\/0\/6\/1524297498501.jpg","price":458800,"ownSpec":"{\"4\":\"\u5170\u7389\u9650\u91CF\u5B9A\u5236\u7248\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"6_0_0","enable":true,"createTime":"2018-04-21T15:58:19.000+08:00","lastUpdateTime":"2018-04-21T15:58:19.000+08:00","stock":9999}];
	const specs = [{"id":1,"cid":76,"name":"\u4E3B\u4F53","params":[{"id":1,"cid":76,"groupId":1,"name":"\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":2,"cid":76,"groupId":1,"name":"\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":3,"cid":76,"groupId":1,"name":"\u4E0A\u5E02\u5E74\u4EFD","numeric":true,"unit":"\u5E74","generic":true,"searching":false,"segments":""}]},{"id":2,"cid":76,"name":"\u57FA\u672C\u4FE1\u606F","params":[{"id":4,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u989C\u8272","numeric":false,"unit":"","generic":false,"searching":false,"segments":""},{"id":5,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u91CD\u91CF\uFF08g\uFF09","numeric":true,"unit":"g","generic":true,"searching":false,"segments":""},{"id":6,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u6750\u8D28\u5DE5\u827A","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]},{"id":3,"cid":76,"name":"\u64CD\u4F5C\u7CFB\u7EDF","params":[{"id":7,"cid":76,"groupId":3,"name":"\u64CD\u4F5C\u7CFB\u7EDF","numeric":false,"unit":"","generic":true,"searching":true,"segments":""}]},{"id":4,"cid":76,"name":"\u4E3B\u82AF\u7247","params":[{"id":8,"cid":76,"groupId":4,"name":"CPU\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":9,"cid":76,"groupId":4,"name":"CPU\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":10,"cid":76,"groupId":4,"name":"CPU\u6838\u6570","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":11,"cid":76,"groupId":4,"name":"CPU\u9891\u7387","numeric":true,"unit":"GHz","generic":true,"searching":true,"segments":"0-1.0,1.0-1.5,1.5-2.0,2.0-2.5,2.5-"}]},{"id":5,"cid":76,"name":"\u5B58\u50A8","params":[{"id":12,"cid":76,"groupId":5,"name":"\u5185\u5B58","numeric":false,"unit":"","generic":false,"searching":true,"segments":""},{"id":13,"cid":76,"groupId":5,"name":"\u673A\u8EAB\u5B58\u50A8","numeric":false,"unit":"","generic":false,"searching":true,"segments":""}]},{"id":6,"cid":76,"name":"\u6444\u50CF\u5934","params":[{"id":16,"cid":76,"groupId":6,"name":"\u524D\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"},{"id":17,"cid":76,"groupId":6,"name":"\u540E\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"}]},{"id":7,"cid":76,"name":"\u7535\u6C60\u4FE1\u606F","params":[{"id":18,"cid":76,"groupId":7,"name":"\u7535\u6C60\u5BB9\u91CF\uFF08mAh\uFF09","numeric":true,"unit":"mAh","generic":true,"searching":true,"segments":"0-2000,2000-3000,3000-4000,4000-"}]},{"id":11,"cid":76,"name":"\u5C4F\u5E55","params":[{"id":14,"cid":76,"groupId":11,"name":"\u4E3B\u5C4F\u5E55\u5C3A\u5BF8\uFF08\u82F1\u5BF8\uFF09","numeric":true,"unit":"\u82F1\u5BF8","generic":true,"searching":true,"segments":"0-4.0,4.0-5.0,5.0-5.5,5.5-6.0,6.0-"},{"id":15,"cid":76,"groupId":11,"name":"\u5206\u8FA8\u7387","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]}];
	const params = {};
	specs.forEach(group => {
		group.params.forEach(param => {
			params[param.id] = param.name;
		})
	});
	// 初始化特有规格参数默认选中一个
	const indexes = {};
	const initIndex = skus[0].indexes.split("_");
	Object.keys(specialSpec).forEach((id, i) => {
		indexes[id] = parseInt(initIndex[i]);
	})
	const indexArr = skus.map(s => s.indexes);
</script>
<script>
	var itemVm = new Vue({
		el: "#itemApp",
		data: {
			ly,
			specialSpec,// 特有规格参数模板
			params,// 参数对象数组
			indexes,// 初始化被选中的参数
			num: 1,
		},
		methods: {
			decrement() {
				if (this.num > 1) {
					this.num--;
				}
			},
			increment() {
				this.num++;
			},
			addCart() {
				// 判断是否登录
				ly.http.get("/auth/verify").then(() => {
					// 已登录
					ly.http.post("/cart", {
						skuId: this.sku.id,
						title: this.sku.title,
						image: this.images[0],
						price: this.sku.price,
						num: this.num,
						ownSpec: JSON.stringify(this.ownSpec)
					}).then(() => {
						// 跳转到购物车列表页
						window.location.href = "http://www.leyou.com/cart.html";
					}).catch(() => {
						alert("添加购物车失败，请重试！");
					})
				}).catch(() => {
					// 获取以前的购物车
					const carts = ly.store.get("carts") || [];
					// 获取与当前商品id一致的购物车数据
					const cart = carts.find(c => c.skuId === this.sku.id);
					if (cart) {
						// 存在，修改数量
						cart.num += this.num;
					} else {
						// 不存在，新增
						carts.push({
							skuId: this.sku.id,
							title: this.sku.title,
							image: this.images[0],
							price: this.sku.price,
							num: this.num,
							ownSpec: JSON.stringify(this.ownSpec)
						})
					}
					// 未登录
					ly.store.set("carts", carts);
					// 跳转到购物车列表页
					window.location.href = "http://www.leyou.com/cart.html";
				})
			},
			locked(id, i) {
				// 如果只有一个可选项，永不锁定
				if(specialSpec[id].length === 1) return false;
				// 如果有其它项未选，不锁定
				let boo = true;
				Object.keys(this.indexes).forEach(key => {
					if (key !== id && this.indexes[key] == null) {
						boo = false;
						return;
					}
				});
				if (!boo) return false;
				// 如果当前项的组合不存在，锁定
				const {...o} = this.indexes;
				o[id] = i;
				const index = Object.values(o).join("_");
				return !indexArr.includes(index);
			},
			selectSku(id, i) {
				// 先判断当前选中的是否是锁定项
				const isLocked = this.locked(id, i);
				// 无论是否是锁定项，都允许修改
				this.indexes[id] = i;
				// 如果是锁定项，则需要调整其它项的选中状态
				if (isLocked) {
					Object.keys(this.indexes).forEach(key => {
						if (key !== id) {
							const remainSpec = specialSpec[key].filter((e, j) => !this.locked(key, j));
							this.indexes[key] = remainSpec.length === 1 ? specialSpec[key].findIndex(e => e === remainSpec[0]) : null;
						}
					})
				}
			}
		},
		computed: {
			sku() {
				if (Object.values(this.indexes).includes(null)) {
					return skus[0];
				}
				// 获取选中的规格参数的索引
				const index = Object.values(this.indexes).join("_");
				// 去skus集合寻找与index一致的sku
				return skus.find(s => s.indexes === index);
			},
			images() {
				return this.sku.images ? this.sku.images.split(",") : [];
			},
			specGroups() {
				// 获取特有规格参数值
				const ownSpec = JSON.parse(this.sku.ownSpec);
				specs.forEach(group => {
					group.params.forEach(param => {
						if (param.generic) {
							param.value = genericSpec[param.id];
						} else {
							param.value = ownSpec[param.id];
						}
					})
				})
				return specs;
			},
			ownSpec() {
				const ownSpec = JSON.parse(this.sku.ownSpec);
				const obj = {};
				Object.keys(ownSpec).forEach(id => {
					obj[this.params[id]] = ownSpec[id];
				})
				return obj;
			}
		},
		components: {
			lyTop: () => import('/js/pages/top.js')
		}
	});
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		$("#service").hover(function () {
			$(".service").show();
		}, function () {
			$(".service").hide();
		});
		$("#shopcar").hover(function () {
			$("#shopcarlist").show();
		}, function () {
			$("#shopcarlist").hide();
		});
	})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
</body>

</html>